﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link href="layui/css/layui.css" rel="stylesheet" />
    <title></title>
    <style>
        .layui-form {
            margin: 30px auto;
            width: 500px;
        }
    </style>
</head>
<body>
    <form class="layui-form layui-form-pane" lay-filter="formTest">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名：</label>
            <div class="layui-input-block">
                <input type="text" name="Name" lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别：</label>
            <div class="layui-input-block">
                <input type="radio" name="Sex" value="男" title="男">
                <input type="radio" name="Sex" value="女" title="女">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">班级：</label>
            <div class="layui-input-block">
                <select name="CID" id="CID" lay-verify="required">
                    <option value=""></option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">身高：</label>
            <div class="layui-input-block">
                <input type="text" name="Height" lay-verify="required" placeholder="请输入身高" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">出生日期：</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" lay-verify="required|datetime" id="Birthday" name="Birthday">
            </div>
        </div>
        <div class="layui-form-item" id="Readed">
            <label class="layui-form-label">状态：</label>
            <div class="layui-input-block">
                <input type="checkbox" name="Readed" lay-skin="switch" lay-filter="switchTest" lay-text="在校|离校">
            </div>
        </div>
        <div class="layui-form-item layui-hide">
            <input type="button" lay-submit lay-filter="save" id="update" value="确认" />
        </div>
    </form>
    <script src="Srcipts/jquery-3.4.1.js"></script>
    <script src="layui/layui.all.js"></script>
    <script src="Srcipts/mymethod.js"></script>
    <script>
        layui.use(['jquery', 'form', 'laydate'], function () {
            var $ = layui.$ //JQuery模块
                , form = layui.form //表单模块
                , laydate = layui.laydate;//日期
            //日期时间选择器
            laydate.render({
                elem: '#Birthday'
                , type: 'date'
                , theme: 'grid'
                , trigger: 'click'//呼出事件改成click
                , calendar: true
            });
            //查询所有的班级信息
            $.ajax({
                type: "Post",
                url: "WebStudent.asmx/SelectClazz",
                contentType: "application/json",
                dataType: "JSON",
                data: null,
                success: function (r) {
                    var clazz = $("#CID");
                    $.each(r.d, function (index, item) {
                        $("<option>").val(item.ID).text(item.CName).appendTo(clazz);
                    });
                    form.render();//数据动态加载后必须全部重新渲染
                },
                error: function () {
                    alert("出错了");
                }
            });
            //得到页面地址栏传过来的数据
            var id = getQueryString("id");
            if (id != null) {
                $.ajax({
                    type: "Post",
                    url: "WebStudent.asmx/SelectByID",
                    contentType: "application/json",
                    dataType: "JSON",
                    data: JSON.stringify({ id: id }),
                    success: function (r) {
                        //console.log(r.d);
                        //给表单赋值
                        form.val("formTest", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                            "Name": r.d.Name // "name": "value"
                            , "Sex": r.d.Sex
                            , "Height": r.d.Height
                            , "CID": r.d.CID
                            , "Birthday": convertToDate(r.d.Birthday, true)
                            , "Readed": r.d.Readed
                        });
                        form.render();//数据动态加载后必须全部重新渲染
                    },
                    error: function () {
                        alert("出错了");
                    }
                });
            } else {
                $("#Readed").addClass("layui-hide");
                $('[value="男"]').prop("checked", true);
            }

        });

    </script>
</body>
</html>